<template>
	<view class="ly-select">
		<view class="ly-select-lable" @click="showAddress = true">{{addressData.provinceName}}{{addressData.cityName}}{{addressData.areaName}}{{addressData.streetName}}</view>
		<address-select v-if="showAddress" :data="addressData" @change="changeAddress" />
	</view>
</template>

<script>
import AddressSelect from './address-select.vue';

export default {
	components: { AddressSelect },
	data() {
		return {
			addressData: {
				area: '',
				areaName: '',
				city: '',
				cityName: '',
				province: '',
				provinceName: '',
				street: '',
				streetName: ''
			},
			showAddress: false
		};
	},
	props: {
    data: {
			type: Object,
			default: () => {}
		},
		value: {
			type: Object,
			default: () => {}
		}
	},
	watch:{
    data(){
      console.log("发生变化",this.data);
			this.setData()
		}
	},
	methods: {
		setData() {
      this.addressData.province = this.data.pCode || ''
      this.addressData.provinceName = this.data.pName || ''
      this.addressData.city = this.data.cCode || ''
      this.addressData.cityName = this.data.cName || ''
			this.addressData.area = this.data.aCode || ''
			this.addressData.areaName = this.data.aName || ''
			this.addressData.street = this.data.sCode || ''
			this.addressData.streetName = this.data.sName || ''
		},
		changeAddress(data) {
			console.log('地址选择', data);
			this.addressData = data
			this.$emit('change', data);
			this.showAddress = false;
		}
	}
};
</script>

<style>

	.ly-select-lable {
		height: 80rpx;
		line-height: 80rpx;
	}
</style>
